<template>
    <div>
        <div class="text-xl ">【大区数据信息】</div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let mychart = null
const chart = ref(null)
const props = defineProps(['data'])

const option = ref({
    xAxis: {
        type: 'value',
        data: props.data.regions.map(i => i.value),
        max: (value) => parseInt(value.max * 1.2),
        show: false
    },
    yAxis: {
        type: 'category',
        inverse: true,
        data: props.data.regions.map(i => i.name),
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#fff',
        }
    },
    grid: {
        top: 10,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true
    },
    series: {
        type: 'bar',
        data: props.data.regions.map(i => {
            return {
                name: i.name,
                value: i.value
            }
        }),
        showBackground: true,
        backgroundStyle: {
            color: '#666'
        },
        itemStyle: {
            borderRadius: 10
        },
        label: {
            show: true,
            position: 'right'
        },
        barWidth: 12
    }
})

const initChart = () => {
    mychart.setOption(option.value)
}
onMounted(() => {
    mychart = echarts.init(chart.value)
    initChart()
})
window.addEventListener('resize', () => {
    mychart.resize()
})
</script>

<style lang="scss" scoped></style>